<template>
	<view>
		<js-error mode="bottom" ref="jsError"></js-error>

		<!-- @custom="loadData" @search="confirm" -->
		<view class="search flex" style="align-items: center;width: 100%; justify-content: space-between;">
			<u-search v-model="keyData" style="width: 100%; " placeholder="请输入批次号或扫码" :show-action="false"
				@custom="confirm2" @search="confirm2"></u-search>
			<text class="cuIcon-scan text-xxl margin-left" @click="search()"></text>
		</view>
		<u-form-item label=" " prop="" label-width="20">
			<view style="display: flex;align-items: center;width: 100%; justify-content: space-between;">
				<u-radio-group v-model="query.ctype" style="flex: 1;">
					<u-radio name="0">托盘追溯</u-radio>
					<u-radio name="1">U8批次</u-radio>
				</u-radio-group>
				<button class="cu-btn  bg-confirm  margin-right" @click="confirm2">查询</button>
			</view>
		</u-form-item>

		<scroll-view scroll-y="true" @scrolltolower="loadMore" :refresher-enabled="true" scrolltolower-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="refresherrefresh" @scrolltoupper="refresherrefresh"
			class="scroll-view-class" :style="{ height: computedScrollViewHeight }">
			<view class="scroll-content" ref="scrollContent" style="
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			" :style="{ height: computedScrollViewHeight  }">
				<view v-if="list.length" style="padding: 10px 20px;flex: 1;">
					<u-time-line>
						<u-time-line-item nodeTop="-5">
							<template v-slot:node>
								<view class="u-node" style="width: 54rpx;height: 54rpx;">
									<u-icon name="pushpin-fill" color="#fff" :size="28"></u-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-title" style="font-size: 24px;">{{list[0].cbatch}}</view>
									<view style="height: 20px;">

									</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item nodeTop="-5" v-for="(item,index) in list" :key="index">
							<template v-slot:node>
								<view class="u-node">
									{{index+1}}
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-title">{{ item.maketime || ''  }}</view>
									<view class="u-order-desc ">
										<view style="background-color: #fff;border-radius: 10px;">
											<view class="cu-form-group ">

												<view class="title text-bold">
													<u-icon name="order" color="#3e97b0" :size="40"></u-icon>
													出库信息：
												</view>
												<view style="flex: 1;"> {{ item.djno || ''  }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">出库日期：</view>
												<view style="flex: 1;"> {{ item.ddate || ''  }}</view>
											</view>
											<!-- <view class="cu-form-group ">
												<view class="title">制单时间：</view>
												<view style="flex: 1;"> {{ item.maketime || ''  }}</view>
											</view> -->
											<view class="cu-form-group ">
												<view class="title">运输单位：</view>
												<view style="flex: 1;"> {{ item.carVenName || ''   }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">车牌号：</view>
												<view style="flex: 1;"> {{ item.carNo || ''   }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">操作员：</view>
												<view style="flex: 1;"> {{ item.cmaker || ''   }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">批次：</view>
												<view style="flex: 1;"> {{ item.cbatch || ''   }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">数量：</view>
												<view style="flex: 1;"> {{ item.iqty || ''   }}</view>
											</view>
										</view>
										
										<view style="background-color: #fff;border-radius: 10px;margin-top: 10px;">
											<view class="cu-form-group ">
										
												<view class="title text-bold">
													<u-icon name="attach" color="#3e97b0" :size="40"></u-icon>
													订单信息：
												</view>
												<view style="flex: 1;"> {{ item.cSOCode || ''   }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">订单日期：</view>
												<view style="flex: 1;"> {{ item.soDate || ''   }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">合同号：</view>
												<view style="flex: 1;"> {{ item.htno || ''   }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">客户：</view>
												<view style="flex: 1;"> {{ item.cCusName || ''   }}</view>
											</view>
										
										</view>

										<view style="background-color: #fff;border-radius: 10px;margin-top: 10px;">
											<view class="cu-form-group ">

												<view class="title text-bold">
													<u-icon name="attach" color="#3e97b0" :size="40"></u-icon>
													存货信息：
												</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">存货编码：</view>
												<view style="flex: 1;"> {{ item.cinvcode|| basInv.invCode || '' }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">存货名称：</view>
												<view style="flex: 1;"> {{ item.cinvname || basInv.invName || '' }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">规格型号：</view>
												<view style="flex: 1;"> {{ item.cinvstd || basInv.invStd || '' }}</view>
											</view>
											<view class="cu-form-group ">
												<view class="title">单位：</view>
												<view style="flex: 1;"> {{ item.cComUnitName || basInv.unitName || '' }}</view>
											</view>

										</view>

									</view>
								</view>
							</template>
						</u-time-line-item>

					</u-time-line>
					<view v-if="list.length" class="loadmore">
						<u-loadmore :status="loadStatus"></u-loadmore>
					</view>
				</view>


				<u-empty v-if="!list.length" style="height: 70vh;"></u-empty>
			</view>
		</scroll-view>
		<view class="text-bold"
			style="position: fixed;bottom: 0; width: 100%;background: #fff; padding:10px 20px;text-align: right;z-index: 999;font-size: 40rpx;height: 50px;"
			v-if="flag">
			<view class="">
				总数：{{count}}
			</view>
		</view>
	</view>
</template>
<script>
	import config from '@/common/config.js'
	import util from '@/common/fire.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				keyData: '',
				query: {
					ctype: '0',
					pageNo: 1,
					pageSize: 5,
				},
				focus: true,
				list: [],
				loadStatus: "loadmore",
				triggered: false,
				scrollViewHeight: 0,
				headerHeight: 0,
				flag: true,
				count: 0,
				basInv:{},
			};
		},
		onLoad(p) {
			// this.query.pageNo = 1;
			// this.loadData();
		},
		mounted() {
			this.calculateScrollViewHeight();
		},
		computed: {
			computedScrollViewHeight() {
				return this.scrollViewHeight === 'auto' ? 'auto' : `${this.scrollViewHeight}px`;
			},
		},
		methods: {
			async calculateScrollViewHeight() {
				try {
					// this.headerHeight = 52
					this.headerHeight = 112
					// 计算tabBar高度
					if (this.flag) {
						this.tabBarHeight = 60; // 假设tabbar高度为50px，实际应根据实际情况获取
					} else {
						this.tabBarHeight = 2;
					}
					// 获取屏幕高度
					const systemInfo = uni.getSystemInfoSync();
					const screenHeight = systemInfo.windowHeight;
					// 计算scroll-view高度
					this.scrollViewHeight = screenHeight - (this.headerHeight + this.tabBarHeight);
				} catch (error) {
					console.error('Error while calculating ScrollView height:', error);
				}
			},

			async loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.pageNo += 1;
					this.loadData("add");
				}, 100);
			},
			loadData(type) {
				// 循环10次重复赋值
				this.$u.api.mf.traceBatchTrace(this.query).then((res) => {
					if (res.result == 'false' ) {
						this.list = []
						this.count = 0
						this.basInv= {}
						this.$refs.jsError.showError('', res.message, 'error');
						return;
					}

					if (res.list.length >= 0) {
						// this.xmList = res.list
						if (res.list.length < 5 || res.list.length == 0) {
							this.loadStatus = "nomore";
						}
						var data = res.list;
						if (type == "add") {
							for (var i = 0; i < data.length; i++) {
								this.list.push(data[i]);
							}
						} else {
							this.list = data;
						}
						this.count = res.count
						this.basInv= res.basInv || {}
					}
				});
			},
			async refresherrefresh() {
				this.triggered = true;
				this.query.pageNo = 1;
				await this.loadData();
				const scrollTop = 0
				uni.pageScrollTo({
					scrollTop,
					duration: 0,
				});
				setTimeout(() => {
					this.triggered = false;
				}, 500);
			},
			makeSound(name) {
				console.log("=====testClick=====");
				let src = '/static/' + name + '.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			confirm2() {
				this.query.pageNo = 1;

				if (this.query.ctype == '0') {
					this.query.cbatch = 'tp_' + this.keyData
				}
				if (this.query.ctype == '1') {
					this.query.cbatch = this.keyData
				}
				this.loadData();
			},
			confirm() {
				this.focus = false
				this.commonSearch(this.keyData)
			},
			search() {
				var _that = this;
				_that.focus = false
				const wechat = uni.getSystemInfoSync()?.host?.env
				if (wechat === 'WeChat') {
					uni.scanCode({
						scanType: ["barCode", "qrCode"],
						// onlyFromCamera: true,
						success: async (res) => {
							// _that.query.cbatch = res.result;
							await _that.commonSearch(res.result)
						},
					});
				} else {
					var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
					console.log('mpaasScanModule', mpaasScanModule)

					mpaasScanModule.mpaasScan({
							// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
							'scanType': ['qrCode', 'barCode'],
							// 是否隐藏相册，默认false不隐藏
							'hideAlbum': false,
							//ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文                       
							'language': 'en',
							//相册选择照片识别错误提示(ios)
							'failedMsg': '未识别到二维码，请重试',
							//Android支持全屏需要设置此参数
							'screenType': 'full'
						},
						async (ret) => {
							console.log('ret', ret)
							if (ret.resp_message == 'success') {
								// _that.query.cbatch = ret.resp_result;
								await _that.commonSearch(ret.resp_result)
							}
						})
				}
			},
			async commonSearch(barCode) {
				let that = this
				//扫存货
				console.log(util.checkBarcode(barCode, this.vuex_config.cbatchPrefix))
				if (util.checkBarcode(barCode, this.vuex_config.cbatchPrefix) ||
					util.checkBarcode(barCode, this.vuex_config.TuoPanPrefix)) {
					this.$u.api.mf.getBarInfo({
						barCode,
					}).then(res => {
						if (res.result == 'true') {
							if (!res.error) {
								if (res.data.basInv) {
									console.log(res, 'res')
									// if(this.query.ctype == '1'){
									// 	this.query.cbatch = res.data.batchInfo.u8Batch
									// }else{
									// 	this.query.cbatch = res.data.bizKey
									// }
									// if (this.query.ctype == '1') {
									// 	this.keyData = res.data.batchInfo.u8Batch
									// } else {
									// 	this.keyData = res.data.bizKey
									// }
									this.keyData = res.data.bizKey 
									this.confirm2()
									// this.query.cbatch = barCode
									// this.loadData()
									this.$forceUpdate()
									setTimeout(() => {
										that.makeSound("cg");
									}, 500)
								} else {
									setTimeout(() => {
										that.makeSound("sb");
									}, 500)
									that.$refs.jsError.showError('', '失败！', 'error');
								}

							} else {
								setTimeout(() => {
									that.makeSound("sb");
								}, 500)
								that.$refs.jsError.showError('', res.error, 'error');
							}
						} else {
							setTimeout(() => {
								that.makeSound("sb");
							}, 500)
							that.$refs.jsError.showError('', res.message, 'error');
						}
					})
				} else {
					setTimeout(() => {
						that.makeSound("sb");
					}, 500)
					this.$refs.jsError.showError('', '请扫描正确的条码！', 'error');
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.text-border {
		border: 2px solid rgb(170, 170, 170);
		border-radius: 5px;
		position: relative;
		padding-top: 20rpx;
		margin-top: 40rpx;
		padding-left: 20rpx;

		.text {
			position: absolute;
			background-color: #fff;
			padding: 10rpx 10rpx;
			top: -25rpx;
			right: 30rpx;
		}
	}

	.text-xxl {
		font-size: 60rpx;
	}

	.cu-bar {
		min-height: 60px;
	}

	.cu-btn {
		font-size: 16px;
		height: 40px;
	}

	.foot {
		background: #fff;
	}

	.cu-item {
		flex-wrap: wrap;
		padding: 8px 15px !important;
	}

	.title {
		width: 240rpx;
	}

	.button {
		font-size: 32rpx;
		color: #666666;
		line-height: 40rpx;
		padding: 12rpx 40rpx;
		margin-bottom: 20rpx;
		background: #e2e2e2;
		border-radius: 180rpx;
	}

	.button:hover {
		background: #3e97b0;
		color: #ffffff;
	}


	.bg-confirm {
		background: #3e97b0;
		color: #ffffff;
	}


	.u-node {
		min-width: 50rpx;
		min-height: 50rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// background: #3e97b0;
		background: #19be6b;
		color: #fff;

	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 38rpx;
	}

	.u-order-desc {
		// color: rgb(150, 150, 150);
		// font-size: 28rpx;
		// margin-bottom: 6rpx;
		margin: 20rpx 0;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>